<template>
  <div class="main theme-color bg-32">
    <div class="indexContent">
      <div class="print_flexa flex-s-between-start font-f-ib mgt-30">
        <div class="print_flexa_img flex-2">
          <img src="../assets/img/img_call4@1x.png" alt="" />
        </div>
        <div class="print_btn flex-3">
          <div class="print_btn_info">
            <div>
              <p class="color-f font-30 fontW-8">{{ $t("footer.text") }}</p>
              <p class="color-f font-30 fontW-8 mgt-30">{{ $t("footer.text_a") }}</p>
            </div>
            <div class="font-24 fontW-8 font-45 text-c mgt-30">{{ $t("sectionOne.text") }}</div>
            <div class="btn_button mgt-30">
              <el-button
                class="color-0 bg-yellow fontW-7 font-28 box-4"
                @click="jumpToWaterMask"
                type="primary">{{ $t("sectionOne.btn_Watermark") }}</el-button>
              <el-button
                class="color-0 bg-ffc4 fontW-7 font-28 box-4"
                @click="jumpToBroker"
                type="primary">{{ $t("sectionOne.btn_Economic") }}</el-button>
              <el-button
                class="color-0 bg-theme fontW-7 font-28 box-4"
                type="primary"
                @click="jumpToCreate">{{ $t("sectionOne.btn_Create") }}</el-button>
            </div>
          </div>
        </div>
      </div>
      <!-- 广告轮播 -->
      <div class="adList mgt-30">
        <el-carousel :indicator-position="'none'" trigger="click" height="150px">
          <el-carousel-item v-for="item in adList" :key="item.ID">
            <a :href="item.Url" target=“_blank”>
              <img :src="item.Thumb" alt="">
            </a>
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 趋势 -->
      <div class="trendBox">
        <div class="trend text-c font-f-ib">
          <h2 class="font-28 color-f fontW-b">{{$t('index.Trend')}}</h2>
        </div>
        <div class="trendContent flex-w-start">
          <div class="trend_item" v-for="item in trendData" :key="item.id">
            <trend-item :data="item"/>
          </div>
        </div>
      </div>
      <!-- 经纪人 -->
      <div class="brokerBox mgt-30">
        <div class="broker text-c font-f-ib">
          <h2 class="font-28 color-f fontW-b pdtb-20">{{$t('index.broker')}}</h2>
        </div>
        <div class="brokerContent">
          <div class="broker_item">
            <swiper :swiperData="brokerData" :from="'index'"/>
          </div>
        </div>
      </div>
    </div>
    <div class="partner">
      <partner/>
    </div>
    <Footer :AccountList="AccountList"></Footer>
  </div>
</template>
<script>
import Footer from '../components/Footer'

import TrendItem from '../components/component/TrendItem'
import BrokerItem from '../components/component/BrokerItem'
import Partner from '../components/Partner'
import Swiper from '../components/component/Swiper'
// import data from '../mock/data'
import {trendData, brokerDataIndex} from '../mock/data'

export default {
  data () {
    return {
      msg: 'i meet nft',
      adList: [],
      // trendData: data.trendData,
      trendData: trendData,
      brokerData: brokerDataIndex,
      AccountList: []
    }
  },
  components: {
    Footer,
    TrendItem,
    BrokerItem,
    Partner,
    Swiper
  },
  created () {
    this.getSettingList()
  },
  mounted () {
    // console.log(trendData, '-------')
  },
  methods: {
    jumpToCreate: function () {
      this.$router.push({
        path: '/mint_imeet'
      })
    },
    jumpToWaterMask: function () {
      this.$router.push({
        path: '/watermark'
      })
    },
    jumpToBroker: function () {
      this.$router.push({
        path: '/setting'
      })
    },
    getSettingList: function () {
      this.$loading.show()
      this.$Api.Common.getSettingList()
        .then((res) => {
          this.$loading.hide()
          let setting = []
          console.log(res, 'getSettingList,res', JSON.stringify(res))
          if (res && res.code === 200) {
            setting = res.data
          }
          // 广告图
          setting.Ads.forEach(item => {
            let obj = {}
            obj.ID = item.ID
            obj.Thumb = `http://api.imeetnft.io/${item.Thumb}`
            obj.Url = item.Url
            this.adList.push(obj)
          })
          // 平台官方账号
          setting.Accounts.forEach(item => {
            let obj = {}
            obj.Account = item.Account
            obj.Name = item.Name
            obj.Thumb = `http://api.imeetnft.io/${item.Thumb}`
            obj.SocialID = item.SocialID
            this.AccountList.push(obj)
          })
        })
        .catch(err => {
          this.$loading.hide()
          console.log(err, JSON.stringify(err))
        })
    }
  }
}
</script>
<style lang="less" scoped>
.main {
  width: 100%;
  height: 100%;
  .indexContent {
    width: 94%;
    height: 100%;
    margin: 0 auto;
    .print_flexa {
      width: 100%;
      overflow: hidden;
      .print_flexa_img {
        width: 100%;
        height: auto;
        img {
          width: 100%;
        }
      }
    }
    .adList {
      img {
        width: 100%;
        height: 100%;
        overflow: hidden;
        object-fit: cover;
        display: block;
      }
    }
    .trendBox {
      .trendContent {
        width: 100%;
        overflow: hidden;
        .trend_item {
          width: 23%;
          margin: 1%;
        }
      }
    }
    .brokerBox {
      margin: 0 1%;
      .brokerContent {
        width: 100%;
        height: auto;
        overflow: hidden;
        .brokerItem {
          width: 100%;
          height: auto;
          overflow: hidden;
        }
      }
    }
    .print_btn {
      margin: 0 3%;
      .print_btn_info {
        width: 100%;
        height: auto;
        overflow: hidden;
        .btn_button {
          button {
            // width: 29%;
            width: auto;
            margin: 10px 1.5%;
            border: none;
          }
          /deep/.el-button--primary:nth-child(1) {
            background: #ffd500;
          }
          /deep/.el-button--primary:nth-child(2) {
            background: #fe66c4;
          }
          /deep/.el-button--primary:nth-child(3) {
            background: #7de9ff;
          }
        }
      }
    }
    .trend {
      line-height: 120px;
    }
    .trend_a {
      width: 100%;
      .ass {
        width: 100%;
      }
      .critic {
        width: 100%;
        height: 116px;
        padding: 30px 10px 30px 10px;
        background: rgba(255, 255, 255, 0.8);
      }
      .trend_s {
        width: 100%;
        height: 35px;
        background: rgba(93, 93, 93, 0.8);
        display: flex;
        justify-content: space-between;
        padding: 5px 10px 5px 10px;
        .trend_by{
          padding-left: 10px;
          width: 30%;
        }
        .images{
          position: relative;
          top: -50px;
          // background-color: blue;
        }
        .trend_base{
          position: relative;
          // height: 70px;
          top: -5 0px;
          width: 35%;
          // background-color: honeydew;
          .trend_nake{
            padding-left: 10px;
            width: 30%;
          }
          .trend_base_img{
            // background-color: red;
            width: 20%;
            box-sizing: border-box;
          }
        }
      }
    }
    .btn {
      // width: 55%;
      width: 55%;
      height: 325px;
      .btn_text{
        width: 100%;
        .btn_button{
          width: 100%;
          margin-top: -20px;
        }
      }
      p{
        line-height: 50px;
      }
      .el-button {
        width: 212px;
        height: 48px;
        border: none;
      }
      /deep/.el-button--primary:nth-child(1) {
        background: #ffd500;
      }
      /deep/.el-button--primary:nth-child(2) {
        background: #fe66c4;
      }
      /deep/.el-button--primary:nth-child(3) {
        background: #7de9ff;
      }
    }
  }
  .partner {
    width: 100%;
    height: auto;
    background: #000000;
    overflow: hidden;
    margin: 50px 0 30px;
  }
}
</style>
